<template>
  <view class="uni-wrap">
    <scroll-view class="pb-50">
      <view class="my-card-view">
        <uni-forms ref="form" :border="true" :model="formData" :rules="rules" err-show-type="toast">
          <template>
            <uni-card title="单据信息" :is-shadow="false" :border="false">
              <!-- <view v-show="1 > 2">
                <uni-forms-item name="inventoryId" :label-width="0" />
              </view>-->
              <template>
                <uni-forms-item label="单据名称" name="selfoutName" :label-width="labelWidth" required>
                  <uni-easyinput
                    v-model="formData.selfoutName"
                    :placeholderStyle="placeholderStyle"
                    placeholder="请输入单据名称"
                  />
                </uni-forms-item>
                <uni-forms-item label="单据编码" name="selfoutCode" :label-width="labelWidth">
                  <uni-easyinput value="自动生成" :disabled="true" :inputBorder="false" />
                </uni-forms-item>

                <uni-forms-item label="单据类型" name="selfoutType" :label-width="labelWidth">
                  <uni-easyinput
                    v-model="formData.selfoutType"
                    :disabled="true"
                    :inputBorder="false"
                  />
                </uni-forms-item>
                <uni-forms-item label="单据状态" name="selfoutState" :label-width="labelWidth">
                  <uni-easyinput
                    v-model="formData.selfoutState"
                    :disabled="true"
                    :inputBorder="false"
                  />
                </uni-forms-item>
                <uni-forms-item label="开始时间" name="selfoutStartTime" :label-width="labelWidth">
                  <uni-datetime-picker type="date" v-model="formData.selfoutStartTime" />
                </uni-forms-item>
              </template>
            </uni-card>

            <uni-card title="钢瓶信息" :is-shadow="false" :border="false">
              <view class="add-view">
                <button type="primary" size="mini" @click="goToChooseDevice()">+ 添加钢瓶</button>
                <view class="sub-list">
                  <view
                    class="item"
                    v-for="(item, index) in formData.steelcyinderSelfoutProList"
                    :key="index"
                  >
                    <view class="header-view">
                      <view class="header-title">
                        {{item.steelcyinderCode}} - {{
                        item.steelcyinderName
                        }}
                      </view>
                      <view class="delete" @click="bottleDelete(index)">
                        <text class="uni-card-error">删除</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </uni-card>
          </template>
        </uni-forms>
      </view>
    </scroll-view>

    <view class="bottomFixed">
      <view class="btn-box">
        <button type="primary" class="btn-main" @click="submit('form')">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      placeholderStyle: "font-size: 14px",
      labelWidth: 100,
      formData: {
        selfoutType: "入库",
        selfoutState: "待入库",
        selfoutStartTime: moment().format("YYYY-MM-DD"),
        steelcyinderSelfoutProList: []
      },
      rules: {
        inventoryName: {
          rules: [
            {
              required: true,
              errorMessage: "请输入单据名称"
            }
          ]
        }
      }
    };
  },
  onLoad() {},
  methods: {
    bottleAdd(info) {
      this.formData.steelcyinderSelfoutProList.push(info);
    },

    bottleDelete(index) {
      this.formData.steelcyinderSelfoutProList.splice(index, 1);
    },

    goToChooseDevice() {
      let that = this;
      uni.navigateTo({
        url: "/pagesCommon/common/bottleChoose",
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          acceptDataFromPage: function(res) {
            const deviceCode = res.data;
            that.getDeviceInfoByCode(deviceCode);
          }
        }
      });
    },

    //根据钢瓶编码获取钢瓶相关信息
    getDeviceInfoByCode(bottlecode) {
      let that = this;
      that
        .$get(`/basicData/steelcyinder/list`, { steelcyinderCode: bottlecode })
        .then(res => {
          const bottleInfo = res.rows[0];
          bottleInfo.steelcyinderId = bottleInfo.id;
          that.haveChooseDevice = true;
          console.log("bottleInfo", bottleInfo);
          that.bottleAdd(bottleInfo);
        });
    },

    submit(ref) {
      this.$refs[ref].validate().then(formDatas => {
        uni.showLoading({
          title: "提交中...",
          mask: true
        });
        let subParams = {
          ...this.formData
        };

        let url = "/workProcess/selfout";
        console.log(subParams);
        this.$post(url, subParams).then(res => {
          uni.hideLoading();
          if (res && res.code == 200) {
            uni.showModal({
              title: "提示",
              content: "添加单据成功",
              success: function() {
                uni.navigateBack({
                  delta: 1
                });
              }
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none"
            });
          }
        });
      });
    }
  }
};
</script>

<style lang="scss">
.add-view {
  margin-bottom: 20rpx;
  .sub-list {
    .item {
      margin-bottom: 8px;
      .header-view {
        display: flex;
        background: #e9edfc;
        align-items: center;
        padding: 6rpx 18rpx;
        .header-title {
          border-radius: 10rpx 10rpx 0rpx 0rpx;
          font-size: 24rpx;
          color: #78797b;
          flex: 1;
        }
      }
    }
  }
}
</style>
